<template>
  <div class="app-container"  >
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
      <!--    <el-form-item label="公司名称" prop="factoryName">
            <el-input
              v-model="queryParams.factoryName"
              placeholder="请输入公司名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="公司代码" prop="factoryCode">
            <el-input
              v-model="queryParams.factoryCode"
              placeholder="请输入公司代码"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>-->
      <el-form-item label="入库单号" prop="danhao">
        <el-input
          v-model="queryParams.danhao"
          placeholder="请输入入库单号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="入库类型" prop="rukuType">
        <el-select v-model="queryParams.rukuType" placeholder="请选择入库类型" clearable>
          <el-option
            v-for="dict in dict.type.ruku_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="订单类型" prop="orderType">
        <el-select v-model="queryParams.orderType" placeholder="请选择订单类型" clearable>
          <el-option
            v-for="dict in dict.type.order_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="订单编号" prop="orderDanhao">
        <el-input
          v-model="queryParams.orderDanhao"
          placeholder="请输入订单编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="计划号" prop="planId">
        <el-input
          v-model="queryParams.planId"
          placeholder="请输入计划号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="合同编号" prop="contractCode">
        <el-input
          v-model="queryParams.contractCode"
          placeholder="请输入合同编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="入库日期" prop="rukuDate">
        <el-date-picker clearable
                        v-model="queryParams.rukuDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择入库日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="托管标识" prop="isTuoguan">
          <el-input
            v-model="queryParams.isTuoguan"
            placeholder="请输入托管标识"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="质量状态" prop="qualityState">
          <el-select v-model="queryParams.qualityState" placeholder="请选择质量状态" clearable>
            <el-option
              v-for="dict in dict.type.quality_state"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>


    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['business:rukuInfo:add']"
        >手动入库</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="multiple"
          @click="handleZxRuKu"
          v-hasPermi="['business:rukuInfo:edit']"
        >执行入库</el-button>
      </el-col>
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="danger"-->
<!--          plain-->
<!--          icon="el-icon-delete"-->
<!--          size="mini"-->
<!--          :disabled="multiple"-->
<!--          @click="handleDelete"-->
<!--          v-hasPermi="['business:rukuInfo:remove']"-->
<!--        >撤销</el-button>-->
<!--      </el-col>-->
      <el-col :span="1.5">
        <el-button
          type="success"
          :disabled="multiple"
          plain
          icon="el-icon-upload2"
          size="mini"
          v-hasPermi="['business:rukuInfo:import']"
          @click="handleU8Import"
        >导入U8</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-upload2"
          size="mini"
          v-hasPermi="['business:rukuInfo:import']"
          @click="handleImport"
        >导入</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['business:rukuInfo:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>


    <el-table v-loading="loading"   :data="rukuInfoMainList"   :row-key="getRowKeys" :expand-row-keys="expands" @expand-change="expandSelect">
      <el-table-column type="expand">
          <template slot-scope="props">
          <el-table @selection-change="handleSelectionChange"  border :row-class-name="tableRowClassName"  v-loading="loading"   height="450"  :data="rukuInfoList" >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column
              label="序号"
              type="index"
              align="center"
              width="50">
            </el-table-column>
            <el-table-column label="入库类型" width="120" align="center" prop="rukuType">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.ruku_type" :value="scope.row.rukuType"/>
              </template>
            </el-table-column>
            <el-table-column label="物料名称" width="150" show-overflow-tooltip align="center" prop="itemName" />
            <el-table-column label="物料名称（英文）" width="150" show-overflow-tooltip align="center" prop="itemNameEn" />
            <el-table-column label="物料编号" width="130" align="center" prop="itemCode" />
            <el-table-column label="物料子编号" width="200" align="center" prop="itemId" />
            <el-table-column label="规格型号" width="150" show-overflow-tooltip align="center" prop="spec" />
            <el-table-column label="物料单位" align="center" prop="unit" />
            <el-table-column label="批次" width="120" align="center" prop="lot" />
            <el-table-column label="入库数量" align="center" prop="rukuNum" />
            <el-table-column label="仓库编号" width="150" align="center" prop="stockId" />
            <el-table-column label="仓库名称" show-overflow-tooltip width="150" align="center" prop="stockName" />
            <el-table-column label="库区编码" width="150" align="center" prop="kuquCode" />
            <el-table-column label="库区名称" show-overflow-tooltip width="150" align="center" prop="kuquName" />
            <el-table-column label="库位编码"  width="150" align="center" prop="kuweiCode" />
            <el-table-column label="包装数量" align="center" prop="packingNum" />
            <el-table-column label="订单类型" width="100" align="center" prop="orderType">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.order_type" :value="scope.row.orderType"/>
              </template>
            </el-table-column>
            <el-table-column label="订单数量" align="center" prop="orderNum" />
            <el-table-column label="供应商名称" show-overflow-tooltip width="150" align="center" prop="supplyName" />
            <el-table-column label="单价" align="center" prop="unitPrice" />
            <el-table-column label="总价" align="center" prop="totalPrice" />
            <el-table-column label="物料类型编码" width="150" show-overflow-tooltip  align="center" prop="classId" />
            <el-table-column label="物料类型" width="150" show-overflow-tooltip align="center" prop="className" />
            <el-table-column label="制造商名称" width="130" show-overflow-tooltip align="center" prop="makerName" />
            <el-table-column label="尺寸" align="center" prop="size" />
            <el-table-column label="单重" align="center" prop="singleWeight" />
            <el-table-column label="总重" align="center" prop="totalWeight" />
            <el-table-column label="使用状态" align="center" prop="useState" />
            <el-table-column label="颜色" align="center" prop="color" />
            <el-table-column label="花纹" align="center" prop="figure" />
            <el-table-column label="材质" align="center" prop="caizhi" />
            <el-table-column label="条形码" align="center" prop="txm" />
            <el-table-column label="托盘码" align="center" prop="tpm" />
            <el-table-column label="创建时间" width="160" align="center" prop="createTime" />
            <el-table-column label="创建者" align="center" prop="createBy" />
            <el-table-column label="更新时间" width="160" align="center" prop="updateTime" />
            <el-table-column label="更新者" align="center" prop="updateBy" />
            <el-table-column label="备注" width="150" show-overflow-tooltip align="center" prop="remark" />
            <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-circle-check"
                  v-if="scope.row.state != 1"
                  @click="handleZxRuKu(scope.row)"
                  v-hasPermi="['business:rukumain:zhixing']"
                >执行</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdate(scope.row)"
                  v-if="scope.row.state != 1"
                  v-hasPermi="['business:rukuInfo:edit']"
                >修改</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)"
                  v-hasPermi="['business:rukuInfo:remove']"
                  v-if="scope.row.state != 1"
                >撤销</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="公司名称" align="center" prop="factoryName" />
      <el-table-column label="公司代码" align="center" prop="factoryCode" />
      <el-table-column label="入库日期" align="center" prop="rukuDate" width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.rukuDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="入库单号" width="180" align="center" prop="danhao" />
     <!-- <el-table-column label="入库类型" width="120" align="center" prop="rukuType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.ruku_type" :value="scope.row.rukuType"/>
        </template>
      </el-table-column>-->
      <el-table-column label="订单编号" width="150" show-overflow-tooltip align="center" prop="orderDanhao" />
      <el-table-column label="计划号" width="130"show-overflow-tooltip  align="center" prop="planId" />
      <el-table-column label="合同编号" width="150" show-overflow-tooltip align="center" prop="contractCode" />
<!--      <el-table-column label="托管标识" align="center" prop="isTuoguan" />-->
      <el-table-column label="质量状态" align="center" prop="qualityState">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.quality_state" :value="scope.row.qualityState"/>
        </template>
      </el-table-column>
      <el-table-column label="备注" width="150" show-overflow-tooltip align="center" prop="remark" />
      <el-table-column label="操作" width="100" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-printer"
            @click="printRu(scope.row)"
            v-hasPermi="['business:rukuInfo:print']"
          >打印入库单</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改入库单对话框 -->
    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" width="1500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="150px">
        <el-row>
          <el-col :span="8">
            <el-form-item  label="入库类型" prop="rukuType">
              <el-select @change="handleChangeRukuType" v-model="form.rukuType" placeholder="请选择入库类型" clearable>
                <el-option
                  v-for="dict in dict.type.ruku_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单类型" prop="orderType">
              <el-select v-model="form.orderType" clearable placeholder="请选择订单类型">
                <el-option
                  v-for="dict in dict.type.order_type"
                  :key="dict.value"
                  :label="dict.label" :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入库日期" prop="rukuDate">
              <el-date-picker clearable
                              v-model="form.rukuDate"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择入库日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
          <el-row>
          <el-col :span="8">
          <el-form-item label="订单编号" prop="orderDanhao">
            <el-input style="width: 80%" v-model="form.orderDanhao" placeholder="请输入订单编号" />
          </el-form-item>
          </el-col>
          <el-col :span="8">
          <el-form-item label="计划号" prop="planId">
            <el-input style="width: 80%" v-model="form.planId" placeholder="请输入计划号" />
          </el-form-item>
          </el-col>
          <el-col :span="8">
          <el-form-item label="合同编号" prop="contractCode">
            <el-input style="width: 80%" v-model="form.contractCode" placeholder="请输入合同编号" />
          </el-form-item>
          </el-col>
          </el-row>
        <!--<el-row>
          <el-col :span="24">
            <el-form-item label="入库仓库" prop="stockId">
              <el-select @change="getCangku"  v-model="form.stockId" placeholder="请选择入库仓库" clearable>
                <el-option
                  v-for="dict in warehouseinfo"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>-->
        <el-row>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input style="width: 500px"  type="textarea" v-model="form.remark" placeholder="请输入备注" />
              <el-input v-model="form.rukuFlag" v-show="false"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <RukuinfoAdd :getForm="form" ref="rukuinfoAdd"></RukuinfoAdd>
          </el-col>
        </el-row>
        <!--
           <el-form-item label="公司名称" prop="factoryName">
          <el-input v-model="form.factoryName" placeholder="请输入公司名称" />
        </el-form-item>
        <el-form-item label="公司代码" prop="factoryCode">
          <el-input v-model="form.factoryCode" placeholder="请输入公司代码" />
        </el-form-item>
        <el-form-item label="入库单号" prop="danhao">
          <el-input v-model="form.danhao" placeholder="请输入入库单号" />
        </el-form-item>
       <el-form-item label="入库数量" prop="rukuNum">
         <el-input v-model="form.rukuNum" placeholder="请输入入库数量" />
       </el-form-item>
       <el-form-item label="订单数量" prop="orderNum">
         <el-input v-model="form.orderNum" placeholder="请输入订单数量" />
       </el-form-item>
       <el-form-item label="包装数量" prop="packingNum">
         <el-input v-model="form.packingNum" placeholder="请输入包装数量" />
       </el-form-item>
       <el-form-item label="入库日期" prop="rukuDate">
         <el-date-picker clearable
           v-model="form.rukuDate"
           type="date"
           value-format="yyyy-MM-dd"
           placeholder="请选择入库日期">
         </el-date-picker>
       </el-form-item>

     <el-form-item label="物料名称" prop="itemName">
         <el-input v-model="form.itemName" placeholder="请输入物料名称" />
       </el-form-item>
       <el-form-item label="物料编码" prop="itemId">
         <el-input v-model="form.itemId" placeholder="请输入物料编码" />
       </el-form-item>
       <el-form-item label="规格型号" prop="spec">
         <el-input v-model="form.spec" placeholder="请输入规格型号" />
       </el-form-item>
       <el-form-item label="物料单位" prop="unit">
         <el-input v-model="form.unit" placeholder="请输入物料单位" />
       </el-form-item>
       <el-form-item label="批次" prop="lot">
         <el-input v-model="form.lot" placeholder="请输入批次" />
       </el-form-item>
       <el-form-item label="供应商" prop="supplyId">
         <el-input v-model="form.supplyId" placeholder="请输入供应商" />
       </el-form-item>
       <el-form-item label="供应商名称" prop="supplyName">
         <el-input v-model="form.supplyName" placeholder="请输入供应商名称" />
       </el-form-item>
       <el-form-item label="仓库编号" prop="stockId">
         <el-input v-model="form.stockId" placeholder="请输入仓库编号" />
       </el-form-item>
       <el-form-item label="仓库名称" prop="stockName">
         <el-input v-model="form.stockName" placeholder="请输入仓库名称" />
       </el-form-item>
       <el-form-item label="库区编码" prop="kuquCode">
         <el-input v-model="form.kuquCode" placeholder="请输入库区编码" />
       </el-form-item>
       <el-form-item label="库区名称" prop="kuquName">
         <el-input v-model="form.kuquName" placeholder="请输入库区名称" />
       </el-form-item>
       <el-form-item label="库位编码" prop="kuweiCode">
         <el-input v-model="form.kuweiCode" placeholder="请输入库位编码" />
       </el-form-item>
       <el-form-item label="价格" prop="price">
         <el-input v-model="form.price" placeholder="请输入价格" />
       </el-form-item>
       <el-form-item label="总价" prop="totalPrice">
         <el-input v-model="form.totalPrice" placeholder="请输入总价" />
       </el-form-item>
       <el-form-item label="单价" prop="unitPrice">
         <el-input v-model="form.unitPrice" placeholder="请输入单价" />
       </el-form-item>
       <el-form-item label="物料类型id" prop="classId">
         <el-input v-model="form.classId" placeholder="请输入物料类型id" />
       </el-form-item>
       <el-form-item label="物料类型" prop="className">
         <el-input v-model="form.className" placeholder="请输入物料类型" />
       </el-form-item>
       <el-form-item label="托管标识" prop="isTuoguan">
         <el-input v-model="form.isTuoguan" placeholder="请输入托管标识" />
       </el-form-item>
       <el-form-item label="质量状态" prop="qualityState">
         <el-select v-model="form.qualityState" placeholder="请选择质量状态">
           <el-option
             v-for="dict in dict.type.quality_state"
             :key="dict.value"
             :label="dict.label" :value="dict.value"
           ></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="制造商编码" prop="makerCode">
         <el-input v-model="form.makerCode" placeholder="请输入制造商编码" />
       </el-form-item>
       <el-form-item label="制造商名称" prop="makerName">
         <el-input v-model="form.makerName" placeholder="请输入制造商名称" />
       </el-form-item>
       <el-form-item label="尺寸" prop="size">
         <el-input v-model="form.size" placeholder="请输入尺寸" />
       </el-form-item>
       <el-form-item label="单重" prop="singleWeight">
         <el-input v-model="form.singleWeight" placeholder="请输入单重" />
       </el-form-item>
       <el-form-item label="总重" prop="totalWeight">
         <el-input v-model="form.totalWeight" placeholder="请输入总重" />
       </el-form-item>
       <el-form-item label="使用状态" prop="useState">
         <el-input v-model="form.useState" placeholder="请输入使用状态" />
       </el-form-item>
       <el-form-item label="颜色" prop="color">
         <el-input v-model="form.color" placeholder="请输入颜色" />
       </el-form-item>
       <el-form-item label="花纹" prop="figure">
         <el-input v-model="form.figure" placeholder="请输入花纹" />
       </el-form-item>
       <el-form-item label="材质" prop="caizhi">
         <el-input v-model="form.caizhi" placeholder="请输入材质" />
       </el-form-item>
       <el-form-item label="条形码" prop="txm">
         <el-input v-model="form.txm" placeholder="请输入条形码" />
       </el-form-item>
       <el-form-item label="托盘码" prop="tpm">
         <el-input v-model="form.tpm" placeholder="请输入托盘码" />
       </el-form-item>
       <el-form-item label="备注" prop="remark">
         <el-input v-model="form.remark" placeholder="请输入备注" />
       </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" :title="ruku.title" :visible.sync="ruku.open" width="1100px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="入库类型" prop="rukuType">
              <el-select  v-model="form.rukuType" placeholder="请选择入库类型">
                <el-option
                  v-for="dict in dict.type.ruku_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单类型" prop="orderType">
              <el-select v-model="form.orderType" placeholder="请选择订单类型">
                <el-option
                  v-for="dict in dict.type.order_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入库日期" prop="rukuDate">
              <el-date-picker clearable
                              v-model="form.rukuDate"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择入库日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="物料名称" prop="itemName">
              <el-input v-model="form.itemName" placeholder="请输入物料名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="物料名称（英文）" prop="itemNameEn">
              <el-input v-model="form.itemNameEn" placeholder="请输入物料名称（英文）" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="质量状态" prop="qualityState">
              <el-select v-model="form.qualityState" placeholder="请选择质量状态">
                <el-option
                  v-for="dict in dict.type.quality_state"
                  :key="dict.value"
                  :label="dict.label" :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item  label="仓库/库区/库位" prop="kuweiCode">
              <el-cascader
                style="width: 200px"
                v-model="warehouse"
                placeholder="请选择仓库/库区/库位"
                :show-all-levels="false"
                clearable
                filterable
                :show-count="true"
                :options="warehouseinfo">
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单位" prop="unit">
              <el-select v-model="form.unit" placeholder="请选择单位" clearable>
                <el-option
                  v-for="dict in dict.type.jc_iteminfo_unit"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="批次" prop="lot">
              <el-input v-model="form.lot" placeholder="请输入批次" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="入库数量" prop="rukuNum">
              <el-input-number style="width: 100%"  controls-position="right" clearable v-model="form.rukuNum" :precision="2"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单价" prop="unitPrice">
              <el-input-number style="width: 100%"   controls-position="right" clearable v-model="form.unitPrice" :precision="2"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="总价" prop="totalPrice">
              {{form.unitPrice*form.rukuNum | numFilter}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="备注" prop="remark">
              <el-input  type="textarea" v-model="form.remark" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitUpdateForm">确 定</el-button>
        <el-button @click="ruku.open = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 入库单导入对话框 -->
    <el-dialog :close-on-click-modal="false" :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <!--  <div class="el-upload__tip" slot="tip">
              <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
            </div>-->
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
    <div style="width: 100%;display: none">
      <div style="width: 100%;font-size: 20px;" ref="printDan">
        <div style="width: 100%;text-align: center;display: flex;margin-top: 20px" >
          <div style="display: inline-block;margin-bottom: 10px;width: 10%;margin-left: 20px" class="qrcode" ref="qrCodeUrl"></div>
          <div style="display: block;height: 80px;width: 90%;">
            <div style="height: 40px;line-height: 40px;text-align: center;font-size: 24px;font-weight: 800">入库单</div>
            <div style="height: 40px;line-height: 40px;text-align: left;font-size: 14px">
              <div style="width: 33%;float: left;margin-left: 5px">订单号：{{formData.orderDanhao}}</div>
              <div style="width: 33%;float: left">接收单位：</div>
              <div style="width: 33%;float: left">入库单号：{{formData.danhao}}</div>
            </div>
          </div>
        </div>
        <div style="width: 100%;margin-top: 10px;margin-bottom: 10px">
          <div style="width: 100%;display: flex;font-size: 14px;text-align: center;border-top: 2px solid black;border-bottom: 2px solid black;height: 30px;line-height: 30px">
            <div style="width: 5%;border-right: 1px solid black">序号</div>
            <div style="width: 12%;border-right: 1px solid black">物料子编号</div>
            <div style="width: 15%;border-right: 1px solid black">物料名称</div>
            <div style="width: 13%;border-right: 1px solid black">规格型号</div>
            <div style="width: 5%;border-right: 1px solid black">单位</div>
            <div style="width: 10%;border-right: 1px solid black">批次</div>
            <div style="width: 8%;border-right: 1px solid black">计划数量</div>
            <div style="width: 8%;border-right: 1px solid black">入库数量</div>
            <div style="width: 10%;border-right: 1px solid black">入库库位</div>
            <div style="width: 14%">备注</div>
          </div>
          <div style="display: flex;font-size: 14px;text-align: center;border-bottom: 1px solid black" v-for="(item,index) in rukuInfoList2" :key="index">
            <div style="width: 5%;border-right: 1px solid black">{{index+1}}</div>
            <div style="width: 12%;border-right: 1px solid black">{{item.itemId}}</div>
            <div style="width: 15%;border-right: 1px solid black">{{item.itemName}}</div>
            <div style="width: 13%;border-right: 1px solid black">{{item.spec}}</div>
            <div style="width: 5%;border-right: 1px solid black">{{item.unit}}</div>
            <div style="width: 10%;border-right: 1px solid black">{{item.lot}}</div>
            <div style="width: 8%;border-right: 1px solid black">{{item.jhrkNum}}</div>
            <div style="width: 8%;border-right: 1px solid black">{{item.rukuNum}}</div>
            <div style="width: 10%;border-right: 1px solid black">{{item.kuweiCode}}</div>
            <div style="width: 14%">{{item.remark}}</div>
          </div>
        </div>

        <div style="width: 100%;text-align: left;display: flex;font-size: 14px" >
          <div style="width: 25%">公司名称：{{formData.factoryName}}</div>
          <div style="width: 25%">入库单位：</div>
          <div style="width: 25%">入库人：</div>
          <div style="width: 25%">入库日期：{{formData.rukuDate}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { mainListRukuInfo,listRukuInfo, getRukuInfo, delRukuInfo, addRukuInfo, updateRukuInfo,addPurRukuInfo,addCkRukuInfo,zhixingRuku,zhixingURuku } from "@/api/business/rukuInfo";
  import { addRukuToOrderInfo } from "@/api/procontrol/control";
  import { getListWarehouseinfo } from "@/api/base/warehouseinfo";
  import { getWarehouseTree,getListWarehouseinfoKuWei } from "@/api/base/warehouseinfoKuwei";
  import {getToken} from "@/utils/auth";
  import QRCode from "qrcodejs2";
  import print from 'print-js';

  import RukuinfoAdd from "./rukuinfoAdd";
  export default {
    components: {
      RukuinfoAdd
    },
    name: "RukuInfo",
    dicts: ['quality_state', 'ruku_type', 'order_type','jc_iteminfo_unit'],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        danhaos: [],
        formData:{},
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 入库单表格数据
        rukuInfoMainList: [],
        rukuInfoList: [],
        rukuInfoList2: [],
        warehouseinfo:[],
        warehouse:[],
        expands:[],
        getRowKeys(row) {
          return row.id
        },// 表格的高度
        tableHeight: document.documentElement.scrollHeight - 220 + "px",
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 入库单导入参数
        upload: {
          // 是否显示弹出层（入库单导入）
          open: false,
          // 弹出层标题（入库单导入）
          title: "导入入库单",
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的用户数据
          updateSupport: 0,
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/business/rukuInfo/importData"
        },
        ruku:{
          // 弹出层标题
          title: "",
          // 是否显示弹出层
          open: false,
        },
        danhao:'',
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          factoryName: null,
          factoryCode: null,
          danhao: null,
          rukuType: null,
          orderType: null,
          orderDanhao: null,
          planId: null,
          contractCode: null,
          rukuNum: null,
          orderNum: null,
          packingNum: null,
          rukuDate: null,
          itemName: null,
          itemNameEn: null,
          itemId: null,
          spec: null,
          unit: null,
          lot: null,
          supplyId: null,
          supplyName: null,
          stockId: null,
          stockName: null,
          kuquCode: null,
          kuquName: null,
          kuweiCode: null,
          itemCode: null,
          price: null,
          totalPrice: null,
          unitPrice: null,
          classId: null,
          className: null,
          isTuoguan: null,
          qualityState: null,
          makerCode: null,
          makerName: null,
          size: null,
          singleWeight: null,
          totalWeight: null,
          useState: null,
          color: null,
          figure: null,
          caizhi: null,
          txm: null,
          tpm: null,
          state: '',
        },
        // 查询参数
        queryParams2: {
          pageNum: 1,
          pageSize: 100,
          danhao: null,
        },
        queryParams3: {
          pageNum: 1,
          pageSize: 100,
          danhao: null,
        },
        // 表单参数
        form: {
          infoList:[]
        },
        // 表单校验
        rules: {
          stockId: [
            { required: true, message: "请选择入库仓库", trigger: "blur" }
          ],
          supplyId: [
            { required: true, message: "请选择供货单位", trigger: "blur" }
          ],
          rukuType: [
            { required: true, message: "请选择入库类型", trigger: "blur" }
          ],
          rukuDate: [
            { required: true, message: "请选择入库日期", trigger: "blur" }
          ],
        }
      };
    },
    created() {
      this.getList();
      /*  getListWarehouseinfo().then(response => {
          this.warehouseinfo = response.data;
        });*/
      getWarehouseTree().then(response => {
        this.warehouseinfo = response.data;
      });
    },
    filters: {
      numFilter (value) {
        // 截取当前数据到小数点后两位
        let realVal = parseFloat(value).toFixed(2)
        return realVal
      }
    },
    methods: {
      async printRu(row){
        this.formData = row
        this.danhao = row.danhao
        let danhao = row.danhao
        this.queryParams3.danhao = danhao
        await listRukuInfo(this.queryParams3).then(response => {
          this.rukuInfoList2 = response.rows;
        });
        this.$refs.qrCodeUrl.innerHTML="";
        new QRCode(this.$refs.qrCodeUrl, {
          text: danhao, //二维码内容
          width: 80,
          height: 80,
        })
        setTimeout(()=>{
          this.priDan()
        },200)

      },
      priDan(){

        const style = '@page { margin:0;margin-top:30px !important;padding-bottom:20px !important; } ' +'@media print { #title{ font-size:40px};#title1{ font-size:40px }  ' ;
        printJS({
          printable:this.$refs.printDan,
          type:'html',
          header:'',
          targetStyles:['*'],
          scanStyles: false,
          style:style,
          onPrintDialogClose: () => {
            console.log('弹窗关闭');
          },
          onLoadingEnd:()=>{
            console.log('加载完毕')
          }
        })
      },
      tableRowClassName({row, rowIndex}) {
        if (row.state == 0) {
          return 'warning-row';
        } else{
          return '';
        }
      },
      /** 查询入库单列表 */
      getList() {
        this.loading = true;
        mainListRukuInfo(this.queryParams).then(response => {
          this.rukuInfoMainList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      /** 查询入库单列表 */
      getList2() {
        listRukuInfo(this.queryParams2).then(response => {
          this.rukuInfoList = response.rows;

        });
      },
      showRukuInfo(row, expandedRows) {
        this.tableData = [];
        //只展开一行
        if (expandedRows.length) {//说明展开了
          this.expands = [];
          if (row) {
            this.expands.push(row.id);//只展开当前行id
          }
        } else {//说明收起了
          this.expands = [];
        }
      },
      expandSelect(row, expandedRows) {
        this.expands = []
        if (expandedRows.length > 0) {
          row ? this.expands.push(row.id) : ''
          this.queryParams2.danhao=row.danhao
          this.getList2();
        }
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          factoryName: null,
          factoryCode: null,
          danhao: null,
          rukuType: null,
          orderType: null,
          orderDanhao: null,
          planId: null,
          contractCode: null,
          rukuNum: null,
          orderNum: null,
          packingNum: null,
          rukuDate:  new Date(),
          itemName: null,
          itemNameEn: null,
          itemId: null,
          spec: null,
          unit: null,
          lot: null,
          supplyId: null,
          supplyName: null,
          stockId: null,
          stockName: null,
          kuquCode: null,
          kuquName: null,
          kuweiCode: null,
          itemCode: null,
          price: null,
          totalPrice: null,
          unitPrice: null,
          classId: null,
          className: null,
          isTuoguan: null,
          qualityState: null,
          makerCode: null,
          makerName: null,
          size: null,
          singleWeight: null,
          totalWeight: null,
          useState: null,
          color: null,
          figure: null,
          caizhi: null,
          txm: null,
          tpm: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.danhaos = selection.map(item => item.danhao)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      getCangku(value){
        let selectedName = {};
        selectedName = this.warehouseinfo.find((item)=>{
          return item.value === value;
          //筛选出匹配数据，是对应数据的整个对象
        });
        this.form.stockName=selectedName.label;
      },
      handleChangeRukuType(value){
        this.reset();
        this.form.rukuType=value
        this.$refs.rukuinfoAdd.rukuinfoAddList=[];
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "手动入库";
        setTimeout(() => {
          this.$refs.rukuinfoAdd.rukuinfoAddListReset();
        }, 10);

      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getRukuInfo(id).then(response => {
          this.form = response.data;
          this.warehouse=[];
          this.warehouse.push(response.data.stockId);
          this.warehouse.push(response.data.kuquCode);
          this.warehouse.push(response.data.kuweiCode);
          this.ruku.open = true;
          this.ruku.title = "修改入库单";
        });
      },
      submitUpdateForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              if(this.form.rukuNum==''||this.form.rukuNum==null||this.form.rukuNum==undefined){
                this.$modal.alertWarning('请输入库数量')
                return;
              }
              if(this.warehouse.length==0){
                this.$modal.alertWarning('请选择仓库库区库位')
                return;
              }
              this.form.warehouse= this.warehouse;
              this.form.totalPrice= Number(this.form.unitPrice*this.form.rukuNum).toFixed(2)
              updateRukuInfo(this.form).then(response => {
                this.$modal.alertSuccess("修改成功");
                this.ruku.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 提交按钮 */
      submitForm() {
        let rukuinfoAddList= this.$refs.rukuinfoAdd.rukuinfoAddList;
        this.form.infoList=rukuinfoAddList;
        if(rukuinfoAddList.length==0){
          this.$modal.alertWarning('请选择物料')
          return;
        }
        for(var i=0;i<rukuinfoAddList.length;i++){
          if(rukuinfoAddList[i].rukuNum==''||rukuinfoAddList[i].rukuNum==null||rukuinfoAddList[i].rukuNum==undefined){
            this.$modal.alertWarning('请输入库数量')
            return;
          }
          if(rukuinfoAddList[i].warehouse[2]==''||rukuinfoAddList[i].warehouse[2]==null||rukuinfoAddList[i].warehouse[2]==undefined){
            this.$modal.alertWarning('请选择库位')
            return;
          }
          /*  if(rukuinfoAddList[i].kuquCode==''||rukuinfoAddList[i].kuquCode==null||rukuinfoAddList[i].kuquCode==undefined){
              this.$modal.alertWarning('请选择库区')
              return;
            }*/
        }
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateRukuInfo(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              if(this.form.rukuType=='0') {
                addPurRukuInfo(this.form).then(response => {
                  this.$modal.msgSuccess("入库成功");
                  this.open = false;
                  this.getList();
                });
              }else if(this.form.rukuType=='3') {
                addCkRukuInfo(this.form).then(response => {
                  this.$modal.msgSuccess("入库成功");
                  this.open = false;
                  this.getList();
                });
              }else {
                //采购入库
                addRukuInfo(this.form).then(response => {
                  this.$modal.msgSuccess("入库成功");
                  this.open = false;
                  this.getList();
                });
              }
            }
          }
        });
      },
      /*执行入库*/
      handleZxRuKu(row){
        if(row.qualityState=="0"){
          this.$modal.alertWarning("入库单质检状态为待检暂时不能执行入库");
          return;
        }
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认执行入库吗?').then(function() {
          return zhixingRuku(ids);
        }).then(() => {
          this.getList2();
          this.$modal.alertSuccess("入库成功");
          /*if(row.rukuType==1){
            getRukuInfo(row.id).then(response => {
              this.getList();
              this.$modal.alertSuccess("入库成功");
            });
          }else {
            this.getList();
            this.$modal.alertSuccess("入库成功");
          }*/
        }).catch(() => {});
      },
      /*执行U8入库*/
      handleU8Import(row){
        var _this = this;
        if(row.qualityState=="0"){
          this.$modal.alertWarning("入库单质检状态为待检暂时不能执行入库");
          return;
        }
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认执行入库U8系统吗?').then(function() {
         return zhixingURuku(ids);
        }).catch(() => {

        });

      },
      /*生成派工单*/
      handleScpg(row){
        const id = row.id;
        this.$modal.confirm('是否确认生成派工单吗?').then(function() {
          return addRukuToOrderInfo(id);
        }).then(() => {
          this.getList();
          this.$modal.alertSuccess("派工单生成成功");
        }).catch(() => {});
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认撤销入库单？' ).then(function() {
          return delRukuInfo(ids);
        }).then(() => {
          this.getList();
          this.$modal.alertSuccess("撤销成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('business/rukuInfo/export', {
          ...this.queryParams
        }, `入库单导出_${new Date().getTime()}.xlsx`)
      },
      /** 导入按钮操作 */
      handleImport() {
        this.upload.title = "入库单导入";
        this.upload.open = true;
      },
      /** 下载模板操作 */
      importTemplate() {
        this.download('business/rukuInfo/importTemplate', {
        }, `入库单导入模板_${new Date().getTime()}.xlsx`)
      },
      // 文件上传中处理
      handleFileUploadProgress(event, file, fileList) {
        this.upload.isUploading = true;
      },
      // 文件上传成功处理
      handleFileSuccess(response, file, fileList) {
        this.upload.open = false;
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
        this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
        this.getList();
      },
      // 提交上传文件
      submitFileForm() {
        this.$refs.upload.submit();
      }
    }
  };
</script>
<style lang="scss" scoped>
  ::v-deep .el-table .warning-row {
    background: #ffe4e1;
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
